<template>
    <!-- 频道列表 -->
        <div class="loginConent">
            <div class="channel">
                <div class="channel-content clearFix">
                    <!-- 导航列表 -->
                    <div class="channel-nav">
                        <h2>
                            <a href="###">豆瓣时间</a>
                        </h2>
                        <ul>
                            <li>
                                <a href="###">腾讯购票</a>
                            </li>
                            <li>
                                <a href="###">腾讯购票</a>
                            </li>
                            <li>
                                <a href="###">腾讯购票</a>
                            </li>
                            <li>
                                <a href="###">腾讯购票</a>
                            </li>
                            <li>
                                <a href="###">腾讯购票</a>
                            </li>
                            <li>
                                <a href="###">腾讯购票</a>
                            </li>
                        </ul>
                    </div>
                    <!-- 右侧列表 -->
                    <div class="channel-right">
                        <h2>热门专栏
                            <span class="pl">&nbsp;(<a href="###">更多</a>) </span>
                        </h2>
                        <ul>
                            <li>
                                <img src="../images/m.webp" alt="">
                                <p>美国股市的背面-黑帮电影</p>
                                <span>音频专栏</span>
                            </li>
                            <li>
                                <img src="../images/m.webp" alt="">
                                <p>美国股市的背面-黑帮电影</p>
                                <span>音频专栏</span>
                            </li>
                            <li>
                                <img src="../images/m.webp" alt="">
                                <p>美国股市的背面-黑帮电影</p>
                                <span>音频专栏</span>
                            </li>
                            <li>
                                <img src="../images/m.webp" alt="">
                                <p>美国股市的背面-黑帮电影</p>
                                <span>音频专栏</span>
                            </li>
                            <li>
                                <img src="../images/m.webp" alt="">
                                <p>美国股市的背面-黑帮电影</p>
                                <span>音频专栏</span>
                            </li>
                            <li>
                                <img src="./images/m.webp" alt="">
                                <p>美国股市的背面-黑帮电影</p>
                                <span>音频专栏</span>
                            </li>
                        </ul>
                    </div>
                    <!-- 左侧列表 -->
                    <div class="channel-left">
                        <h2>热门话题
                            <span class="pl">&nbsp;(<a href="###">更多</a>) </span>
                        </h2>
                        <ul>
                            <li class="rec_topics">
                                <a href="###" class="rec_topics_name">看展记</a>
                                <span class="rec_topics_subtitle">3010.7万次浏览</span>
                            </li>
                            <li class="rec_topics">
                                <a href="###" class="rec_topics_name">看展记</a>
                                <span class="rec_topics_subtitle">3010.7万次浏览</span>
                            </li>
                            <li class="rec_topics">
                                <a href="###" class="rec_topics_name">看展记</a>
                                <span class="rec_topics_subtitle">3010.7万次浏览</span>
                            </li>
                            <li class="rec_topics">
                                <a href="###" class="rec_topics_name">看展记</a>
                                <span class="rec_topics_subtitle">3010.7万次浏览</span>
                            </li>
                            <li class="rec_topics">
                                <a href="###" class="rec_topics_name">看展记</a>
                                <span class="rec_topics_subtitle">3010.7万次浏览</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
</template>
<script>
export default {
    name:'Chennel'
}
</script>
<style lang="less" rel="stylesheet/less" scoped>
        //频道列表
        .loginConent{
            height: 530px;
            .channel{
                width: 1200px;
                height: 530px;
                margin: 0 auto;
                .channel-content{
                    width: 960px;
                    height: 100%;
                    margin: 0 auto;
                    padding-top: 20px;
                    // margin-top: 20px;
                    // overflow: hidden;
                    // 左侧导航
                    .channel-nav{
                        float: left;
                        width: 100px;
                        height: 276px;
                        margin-right: 20px;
                        h2{
                            a{
                                font-size: 24px;
                                color: #27a;
                            }
                        }
                        ul{
                            li{
                                margin-top: 15px;
                                a{
                                    width: 100%;  
                                    font-size: 14px;
                                    color: #27a;
                                }
                            }
                        }
                    }
                    // 右侧列表
                    .channel-right{
                        float: left;
                        width: 535px;
                        height: 522px;
                        // background: pink;
                        h2{
                            font: 15px Arial, Helvetica, sans-serif;
                            color: #072;
                            margin: 10px 0 12px 0;
                            line-height: 150%;
                            .pl{
                                font: 12px Arial, Helvetica, sans-serif;
                                line-height: 150%;
                                color: #666666
                            }
                        }
                        ul{
                            display: flex;
                            flex-wrap: wrap;
                            li{
                                width: 100px;
                                height: 210px;
                                // background: yellow;
                                // margin-left: 10px;
                                padding: 0 15px;
                                img{
                                    width: 100px;
                                    height: 150px;
                                }
                                p{
                                    display: block;
                                    width: 100px;
                                    display: block;
                                    text-align: center;
                                }
                                span{
                                    width: 100%;
                                    margin-top: 5px;
                                    display: block;
                                    text-align: center;
                                }
                            }
                        }
                    }
                    //左侧列表
                    //右侧列表
                    .channel-left{
                        width: 265px;
                        height: 500px;
                        float:right;
                        margin-left: 30px;
                        h2{
                            font: 15px Arial, Helvetica, sans-serif;
                            color: #072;
                            margin: 10px 0 12px 0;
                            line-height: 150%;
                            .pl{
                                font: 12px Arial, Helvetica, sans-serif;
                                line-height: 150%;
                                color: #666666
                            }
                        }
                        ul{
                            .rec_topics{
                                margin-bottom: 15px;
                                .rec_topics_name{
                                    display: inline-block;
                                    margin-bottom: 6px;
                                    font-size: 14px;
                                    line-height: 1.3;
                                    color: #3377aa;
                                }
                                .rec_topics_subtitle{
                                    display: block;
                                    margin-bottom: 15px;
                                    font-size: 13px;
                                    line-height: 1;
                                    color: #aaaaaa;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                            }
                        }
                    }
                }
            }
            &:nth-child(2n){
                background: #eee;
            }
        }
</style>